<template>
  <div>
    <div class="self-box">
      <Card class="smart-query-card">
        <!------ 查询条件第一行 begin------->
        <Row class="smart-query-form-row">
          <Form :model="searchForm" class="tools" inline ref="searchForm">
            <FormItem prop="name">
              <Input
                placeholder="请输入关键词"
                type="text"
                v-model="searchForm.name"
              />
            </FormItem>
            <FormItem>
              <ButtonGroup>
                <Button
                  @click="find"
                  icon="ios-search"
                  type="primary"
                  v-privilege="'email-receiver-query'"
                  >查询</Button
                >
              </ButtonGroup>
            </FormItem>
          </Form>
        </Row>
      </Card>
      <Card class="warp-card">
        <!-------操作按钮行 begin------->
        <Row class="marginBottom10">
          <Button
            @click="showAddPeonyForm"
            icon="md-add"
            type="primary"
            size="small"
            v-privilege="'email-receiver-add'"
            >新增</Button
          >
          <Button
            @click="deleteEmail"
            class="marginLeft10"
            icon="ios-trash-outline"
            size="small"
            type="error"
            v-privilege="'email-receiver-delete'"
            >删除</Button
          >
        </Row>
        <Table
          :columns="columns"
          :data="tableData"
          @on-select="handelSelection"
          border
          highlight-row
          ref="mainTable"
        ></Table>
        <Page
          :current="searchForm.pageNum"
          :page-size="searchForm.pageSize"
          :page-size-opts="[10, 20, 30, 50, 100]"
          :total="total"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          show-elevator
          show-sizer
          show-total
          class="smart-query-table-page"
        ></Page>
      </Card>
    </div>
    <Modal
      :footer-hide="true"
      :title="saveModal.isUpdate ? '更新' : '新建'"
      v-model="saveModal.show"
      @on-cancel="saveFormClose"
      width="500"
    >
      <PeonyListForm
        :isUpdate="saveModal.isUpdate"
        :updateData="saveModal.updateData"
        @on-form-close="saveFormClose"
      />
    </Modal>
  </div>
</template>

<script>
import { emailApi } from '@/api/email.js';
import PeonyListForm from './components/peony-list-form';
export default {
  name: 'EmailList',
  components: {
    PeonyListForm
  },
  props: {},
  data () {
    return {
      saveModal: {
        show: false,
        isUpdate: false,
        updateData: null
      },
      // 数据量
      total: null,
      // 查询参数
      searchForm: {
        endDate: null,
        pageNum: 1,
        pageSize: 10,
        searchCount: true, // 是否查询总条数
        sendStatus: null, // 发送状态 0未发送 1已发送
        startDate: null,
        name: null
      },
      // 表头
      columns: [
        {
          type: 'selection',
          width: 30,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '邮箱地址',
          key: 'email'
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '操作',
          key: 'action',
          width: 160,
          align: 'center',
          className: 'action-hide',
          render: (h, params) => {
            return this.$tableAction(h, [
              {
                title: '编辑',
                directives: [
                  {
                    name: 'privilege',
                    value: 'email-receiver-update'
                  }
                ],
                action: () => {
                  this.showEditPeonyForm(params);
                }
              }
            ]);
          }
        }
      ],
      // table数据
      tableData: [],
      // 删除id
      delId: null
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created () {
    this.getEmailMess();
  },
  methods: {
    // 编辑邮件
    editEmail (params) {
      this.$router.push({
        path: '/email/send-mail',
        query: { id: params.row.id }
      });
    },
    // 新增
    addNew () {
      // this.$router.push({ path: "/email/send-mail" });
    },
    // 重置
    reset () {
      this.$refs.searchForm.resetFields();
      this.searchForm.startDate = null;
      this.searchForm.endDate = null;
      this.$set(this.searchForm, 'endDate', null);
      this.find();
    },
    // 删除确定
    async deleteSure (data) {
      this.$Spin.show();
      let res = await emailApi.deleteEmail(data);
      this.$Message.success('删除成功');
      this.$Spin.hide();
      this.getEmailMess();
    },
    // 删除操作
    deleteEmail () {
      let mainTableSelectArray = this.$refs.mainTable.getSelection();
      if (mainTableSelectArray.length < 1) {
        this.$Message.error('请选择至少一条数据');
        return false;
      }
      this.$Modal.confirm({
        title: '友情提醒',
        content: '确定要删除吗？',
        onOk: () => {
          this.deleteSure(mainTableSelectArray.map(e => e.id));
        }
      });
    },
    // 查询
    find () {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
      this.getEmailMess();
    },
    // 更改分页查询条数
    changePageSize (pageSize) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = pageSize;
      this.getEmailMess();
    },
    // 获取邮件数据
    async getEmailMess () {
      this.$Spin.show();
      let res = await emailApi.getEmail(this.searchForm);
      this.$Spin.hide();
      this.tableData = res.data.list;
      this.total = res.data.total;
      if (res.data.pages < this.searchForm.pageNum) {
        this.searchForm.pageNum = res.data.pages;
      }
    },
    // 页码改变
    changePage (pageNum) {
      this.searchForm.pageNum = pageNum;
      this.getEmailMess();
    },
    showAddPeonyForm () {
      this.saveModal.isUpdate = false;
      this.saveModal.show = true;
    },
    showEditPeonyForm (updateObject) {
      this.saveModal.isUpdate = true;
      this.saveModal.updateData = updateObject.row;
      this.saveModal.show = true;
    },
    saveFormClose () {
      this.saveModal.show = false;
      this.getEmailMess();
    },
    // 触发表格多选事件
    handelSelection (data) {
    }
  }
};
</script>
